<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="h" uri="/syzg-html"%>
<%
	request.setAttribute("ctx", request.getContextPath());
%>
<!DOCTYPE html>
<html>
<body>
<div class="modal fade bs-example-modal-md" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-md" role="document" id="imgeView">
    <div class="modal-content" id="imgedetail">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">图片信息</h4>
      </div>
      <div class="modal-body" id="modalCore">
	    <div class="modal-body-wrap" id="imgback" style="width:100%;height:360px;background-size:100% 100%;background-image: url(${ctx }${picdetail.path });">
	      <form class="form-horizontal mod-editGrid-form" role="form" id="aeForm" name="aeForm">
          <fieldset>
            <!-- generate code start -->

            <div class="form-group">
              <label class="col-sm-2 control-label" for="remark"><i class="fa fa-file-text-o"></i>图片描述</label>
              <div class="col-sm-10">
                <label id="l_remark">${picdetail.remark}</label>
              </div>
            </div>
            
            <div class="form-group">
              <label class="col-sm-2 control-label" for="artist"><i class="fa fa-camera-retro"></i>摄影师</label>
              <div class="col-sm-10">
                <label id="l_artist">${picdetail.artist}</label>
              </div>
            </div>
            
            <div class="form-group">
              <label class="col-sm-2 control-label" for="shootingTime"><i class="fa fa-clock-o"></i>拍摄时间</label>
              <div class="col-sm-10">
                <label id="l_shootingTime"><fmt:formatDate pattern="yyyy-MM-dd HH:mm" value="${picdetail.shootingTime}"/></label> 
              </div>
            </div>

			<!-- generate code end -->
          </fieldset>
        </form>
	    </div>
      </div>
      <div class="modal-footer">
        <button id="btn_close" type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button id="turnlarge" type="button" class="btn btn-default" onclick="turnLarge()">放大</button>
        <button id="turnMin" type="button" class="btn btn-default" onclick="turnMin()">缩小</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
function turnLarge(){
		var width = $("#imgeView").width();
		var height = $("#imgback").height();
	if(width>799&&height>359){
		 $("#imgeView").width(800);
		 $("#imgback").height(560);
	}else{
		 $("#imgeView").width($("#imgeView").width() + 50);
		 $("#imgback").height($("#imgback").height() + 50);
	}
}
 function turnMin(){
	var width = $("#imgeView").width();
 	var height = $("#imgback").height();
	 if(width<601&&height<361){
		 $("#imgeView").width(600);
		 $("#imgback").height(360);
	 }else{
			$("#imgeView").width($("#imgeView").width() - 50);
			$("#imgback").height($("#imgback").height() - 50);
	 }
}
</script>
</body>
</html>